<template>
  <Echart :options="options" id="centreLeft1Chart" height="500px" width="600px"></Echart>
</template>

<script>
import Echart from "@/common/echart";

const animationDuration = 6000;

export default {
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    Echart
  },
  data() {
    return {
      options: {}
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          xAxis: {
            data: newData.xData,
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 22
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross"
            },
            padding: [5, 10],
            textStyle: {
              fontSize: 22
            }
          },
          yAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 22
            }
          },
          legend: {
            data: [newData.seriesName],
            textStyle: {
              fontSize: 22
            }
          },
          series: [
            {
              name: newData.seriesName,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#3888fa",
                  lineStyle: {
                    color: "#3888fa",
                    width: 2
                  },
                  label: {
                    fontSize: 22
                  }
                }
              },
              data: newData.seriesData,
              animationDuration: 2800,
              animationEasing: "quadraticOut"
            }
          ]
        };
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
